@use './variable' as *;

.container {
  .luna-console {
    background: var(--background);
  }

  @mixin luna-console-highlight {
    .luna-console-key {
      color: var(--var-color);
    }
    .luna-console-number {
      color: var(--number-color);
    }
    .luna-console-null {
      color: var(--operator-color);
    }
    .luna-console-string {
      color: var(--string-color);
    }
    .luna-console-boolean {
      color: var(--keyword-color);
    }
    .luna-console-special {
      color: var(--operator-color);
    }
    .luna-console-keyword {
      color: var(--keyword-color);
    }
    .luna-console-operator {
      color: var(--operator-color);
    }
    .luna-console-comment {
      color: var(--comment-color);
    }
  }

  .luna-console-header {
    color: var(--link-color);
    border-bottom-color: var(--border);
  }

  .luna-console-nesting-level {
    border-right-color: var(--border);
    &::before {
      border-bottom-color: var(--border);
    }
  }

  .luna-console-log-container {
    &.luna-console-selected {
      .luna-console-log-item {
        background: var(--contrast);
        &:not(.luna-console-error):not(.luna-console-warn) {
          border-color: var(--border);
        }
      }
    }
  }

  .luna-console-log-item {
    border-bottom-color: var(--border);
    color: var(--foreground);
    a {
      color: var(--link-color) !important;
    }
    .luna-console-icon-container {
      .luna-console-icon {
        color: var(--foreground);
      }
      .luna-console-icon-error {
        color: #ef3842;
      }
      .luna-console-icon-warn {
        color: #e8a400;
      }
    }
    .luna-console-count {
      color: var(--select-foreground);
      background: var(--highlight);
    }
    &.luna-console-warn {
      color: var(--console-warn-foreground);
      background: var(--console-warn-background);
      border-color: var(--console-warn-border);
    }
    &.luna-console-error {
      background: var(--console-error-background);
      color: var(--console-error-foreground);
      border-color: var(--console-error-border);
      .luna-console-count {
        background: var(--console-error-foreground);
      }
    }
    .luna-console-code {
      @include luna-console-highlight();
    }
    .luna-console-log-content {
      .luna-console-undefined,
      .luna-console-null {
        color: var(--operator-color);
      }
      .luna-console-number {
        color: var(--number-color);
      }
      .luna-console-boolean {
        color: var(--keyword-color);
      }
      .luna-console-symbol,
      .luna-console-regexp {
        color: var(--var-color);
      }
    }
  }

  .luna-console-preview {
    @include luna-console-highlight();
  }

  .luna-object-viewer {
    color: var(--primary);
    font-size: 12px !important;
  }
  .luna-object-viewer-null {
    color: var(--operator-color);
  }
  .luna-object-viewer-string,
  .luna-object-viewer-regexp {
    color: var(--string-color);
  }
  .luna-object-viewer-number {
    color: var(--number-color);
  }
  .luna-object-viewer-boolean {
    color: var(--keyword-color);
  }
  .luna-object-viewer-special {
    color: var(--operator-color);
  }
  .luna-object-viewer-key,
  .luna-object-viewer-key-lighter {
    color: var(--var-color);
  }
  .luna-object-viewer-expanded:before {
    border-color: transparent;
    border-top-color: var(--foreground);
  }
  .luna-object-viewer-collapsed:before {
    border-top-color: transparent;
    border-left-color: var(--foreground);
  }

  .luna-notification {
    pointer-events: none !important;
    padding: $padding;
    z-index: 1000;
  }

  .luna-notification-item {
    z-index: 500;
    color: var(--foreground);
    background: var(--background);
    box-shadow: none;
    padding: 5px 10px;
    border: 1px solid var(--border);
  }

  .luna-notification-upper {
    margin-bottom: 10px;
  }

  .luna-notification-lower {
    margin-top: 10px;
  }

  .luna-data-grid {
    color: var(--foreground);
    background: var(--background);
    border-color: var(--border);
    th,
    td {
      border-color: var(--border);
    }
    th {
      background: var(--darker-background);
      &.luna-data-grid-sortable {
        &:hover,
        &:active {
          color: var(--select-foreground);
          background: var(--highlight);
        }
      }
    }
    .luna-data-grid-data-container {
      .luna-data-grid-node.luna-data-grid-selected,
      .luna-data-grid-node.luna-data-grid-selectable:hover {
        background: var(--highlight);
      }
      tr:nth-child(even) {
        background: var(--contrast);
      }
    }
    &:focus {
      .luna-data-grid-data-container {
        .luna-data-grid-node.luna-data-grid-selected {
          background: var(--accent);
        }
      }
    }
  }

  .luna-dom-viewer {
    color: var(--foreground);
    .luna-dom-viewer-html-tag,
    .luna-dom-viewer-tag-name {
      color: var(--tag-name-color);
    }
    .luna-dom-viewer-attribute-name {
      color: var(--attribute-name-color);
    }
    .luna-dom-viewer-attribute-value {
      color: var(--string-color);
    }
    .luna-dom-viewer-html-comment {
      color: var(--comment-color);
    }
    .luna-dom-viewer-tree-item {
      &:hover {
        .luna-dom-viewer-selection {
          background: var(--contrast);
        }
      }
      &.luna-dom-viewer-selected {
        .luna-dom-viewer-selection {
          background: var(--highlight);
        }
      }
      &.luna-dom-viewer-selected:focus {
        .luna-dom-viewer-selection {
          background: var(--accent);
          opacity: 0.2;
        }
      }
    }
    .luna-dom-viewer-text-node {
      .luna-dom-viewer-key {
        color: var(--var-color);
      }
      .luna-dom-viewer-number {
        color: var(--number-color);
      }
      .luna-dom-viewer-null {
        color: var(--operator-color);
      }
      .luna-dom-viewer-string {
        color: var(--string-color);
      }
      .luna-dom-viewer-boolean {
        color: var(--keyword-color);
      }
      .luna-dom-viewer-special {
        color: var(--operator-color);
      }
      .luna-dom-viewer-keyword {
        color: var(--keyword-color);
      }
      .luna-dom-viewer-operator {
        color: var(--operator-color);
      }
      .luna-dom-viewer-comment {
        color: var(--comment-color);
      }
    }
  }

  .luna-dom-viewer-children {
    margin: 0;
    padding-left: 15px !important;
  }

  .inline {
    .luna-modal,
    .luna-notification {
      position: absolute;
    }
  }

  .luna-modal {
    z-index: 9999999;
  }

  .luna-modal-body,
  .luna-modal-input {
    color: var(--foreground);
    background: var(--background);
  }

  .luna-modal-body {
    border-color: var(--border);
  }

  .luna-modal-input {
    user-select: text !important;
    border-color: var(--border);
  }

  .luna-modal-button-group {
    .luna-modal-secondary {
      border-color: var(--border);
      color: var(--foreground);
      background: var(--background);
    }
    .luna-modal-primary {
      background: var(--accent);
    }
    .luna-modal-button {
      &:active {
        &::before {
          background: var(--accent);
        }
      }
    }
  }

  .luna-tab {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--foreground);
    background: var(--darker-background);
  }

  .luna-tab-tabs-container {
    border-color: var(--border);
  }

  .luna-tab-item {
    &.luna-tab-selected,
    &:hover {
      background: var(--highlight);
      color: var(--select-foreground);
    }
  }

  .luna-tab-slider {
    background: var(--accent);
  }

  .luna-text-viewer {
    color: var(--foreground);
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    font-size: $font-size-s;
    .luna-text-viewer-line-text {
      user-select: text;
      * {
        user-select: text;
      }
    }
    .luna-text-viewer-copy,
    .luna-text-viewer-line-number {
      border-color: var(--border);
    }
    .luna-text-viewer-copy .luna-text-viewer-icon-check {
      color: var(--accent);
    }
    .luna-text-viewer-copy {
      background-color: var(--background);
    }
  }

  .luna-setting {
    color: var(--foreground);
    background: var(--background);
  }

  .luna-setting-item {
    &:hover,
    &.luna-setting-selected {
      background: var(--darker-background);
    }
    &.luna-setting-selected:focus {
      outline: none;
    }
  }

  .luna-setting-item-title {
    font-size: $font-size;
  }

  .luna-setting-item-separator {
    border-color: var(--border);
  }

  .luna-setting-item-checkbox {
    input {
      border-color: var(--border);
      &:checked {
        background-color: var(--accent);
        border-color: var(--accent);
      }
    }
  }

  .luna-setting-item-select {
    .luna-setting-select {
      select {
        color: var(--foreground);
        border-color: var(--border);
        background: var(--background);
      }
      &:after {
        border-top-color: var(--foreground);
      }
    }
  }

  .luna-setting-item-button {
    button {
      color: var(--accent);
      background: var(--background);
      border-color: var(--border);
      &:hover,
      &:active {
        background: var(--darker-background);
      }
      &:active {
        border: 1px solid var(--accent);
      }
    }
  }

  .luna-setting-item-number {
    .luna-setting-range-container {
      .luna-setting-range-track {
        .luna-setting-range-track-bar {
          background: var(--border);
          .luna-setting-range-track-progress {
            background: var(--accent);
          }
        }
      }
      input::-webkit-slider-thumb {
        border-color: var(--border);
        background: radial-gradient(
          circle at center,
          var(--dark) 0,
          var(--dark) 15%,
          var(--light) 22%,
          var(--light) 100%
        );
      }
    }
  }

  .luna-box-model {
    background: var(--background);
  }

  .luna-box-model-position,
  .luna-box-model-margin,
  .luna-box-model-border,
  .luna-box-model-padding,
  .luna-box-model-content {
    color: var(--foreground);
    background: var(--background);
  }
}
